<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTTP Webserver</title>
        <!-- build:css styles/app.css -->
        <link rel="stylesheet" href="styles/bootstrap.css">
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
        <script src="index.js"></script>
        <style>
          input[type="file"]::-webkit-file-upload-button {
            background-color: red;
            color: white;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background-color: #006DCC;
            background-image: -moz-linear-gradient(top, #08C, #04C);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#04C));
            background-image: -webkit-linear-gradient(top, #08C, #04C);
            background-image: -o-linear-gradient(top, #08C, #04C);
            background-image: linear-gradient(to bottom, #08C, #04C);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
            border-color: #04C #04C #002A80;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
            padding: 9px 14px;
            font-size: 16px;
            line-height: normal;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

          }
          input[type="file"] {
            margin-bottom: 20px;
          }
          input[type="file"][disabled]::-webkit-file-upload-button {
            color: default;
            background-color: #E6E6E6;
            background-image: none;
            opacity: 0.65;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
          }

          #logger {
            border: solid 1px #c6c6c6;
            border-radius: 5px;
            box-shadow: inset 0px 0px 5px #c6c6c6;
            height: 100px;
            overflow-y: auto;
          }

          select { 
            display: block;
          }
        </style>
    </head>
    <body>
      <div class="hero-unit">
        <h1>HTTP Webserver</h1>
         <p>Serving you locally</p>
         <p>
           <input type="file" webkitdirectory id="directory"/><br />
           <select id="hosts">
             <option value="127.0.0.1">lo - 127.0.0.1</option> 
           </select>
           <input type="text" id="port" value="8080"/><br />
           <button id="start" class="btn btn-primary btn-large" disabled>Start</button>
           <button id="stop" class="btn btn-warning btn-large"  disabled>Stop</button>
         </p>
      </div>
      <pre id="logger"></pre>
    </body>
</html>
